<template>
	<view>
		<el-tabs v-model="active" @tab-click="handleClick">
			<el-tab-pane label="全部" name="1">
				<shopItem :index='active'></shopItem>
			</el-tab-pane>
			<el-tab-pane label="已签收" name="2">
				<shopItem :index='active'></shopItem>
			</el-tab-pane>
			<el-tab-pane label="订单评价" name="3">
				<shopItem :index='active'></shopItem>
			</el-tab-pane>
			<el-tab-pane label="申请售后" name="4">
				<shopItem :index='active'></shopItem>
			</el-tab-pane>
		</el-tabs>
	</view>
</template>

<script>
	import shopItem from '@/pages/person/shopItem.vue'
	export default {
		data() {
			return {
				active: '1'
			};
		},
		components: {
			shopItem
		},
		onLoad: function({index}) {
			if(index) {
				this.active = index
			} else {
				this.active = "1"
			}
		},
		methods: {
			handleClick(tab, event) {
				// console.log(tab, event);
				// console.log(this.active)
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .el-tabs__nav {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
	}

	/deep/ .el-tabs__active-bar {
		width: 0 !important;
	}

	/deep/ .el-tabs__item {
		width: 28%;
		text-align: center;
		padding: 0;
	}

	/deep/ .el-tabs__item.is-active {
		color: rgb(40, 210, 209);
		border-bottom: 2px solid rgb(40, 210, 209);
	}
</style>
